<template>
  <div class="dashboard">
    <el-container>
      <el-header height="60px">
        <div class="header-content">
          <h2>企业数据分析平台</h2>
          <el-button type="danger" @click="handleLogout">退出登录</el-button>
        </div>
      </el-header>
      
      <el-main>
        <div class="overview-cards">
          <el-row :gutter="20">
            <el-col :span="6" v-for="card in overviewCards" :key="card.title">
              <el-card shadow="hover">
                <div class="card-content">
                  <div class="card-title">{{ card.title }}</div>
                  <div class="card-value">{{ card.value }}</div>
                  <div class="card-trend" :class="card.trend">
                    {{ card.percentage }}%
                    <el-icon><CaretTop v-if="card.trend === 'up'" /><CaretBottom v-else /></el-icon>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div class="charts-container">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-card>
                <template #header>
                  <div class="chart-header">
                    <span>销售趋势分析</span>
                    <el-radio-group v-model="timeRange" size="small">
                      <el-radio-button label="week">本周</el-radio-button>
                      <el-radio-button label="month">本月</el-radio-button>
                      <el-radio-button label="year">全年</el-radio-button>
                    </el-radio-group>
                  </div>
                </template>
                <v-chart class="chart" :option="lineOption" autoresize />
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card>
                <template #header>
                  <div class="chart-header">
                    <span>销售分布</span>
                  </div>
                </template>
                <v-chart class="chart" :option="pieOption" autoresize />
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { CaretTop, CaretBottom } from '@element-plus/icons-vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  LineChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

const router = useRouter()
const timeRange = ref('month')

const overviewCards = [
  { title: '总销售额', value: '¥ 126,560', percentage: '12.3', trend: 'up' },
  { title: '访问量', value: '88,846', percentage: '3.2', trend: 'up' },
  { title: '订单量', value: '1,280', percentage: '8.4', trend: 'up' },
  { title: '转化率', value: '25.6%', percentage: '1.2', trend: 'down' }
]

const lineOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '销售额',
    type: 'line',
    smooth: true,
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    areaStyle: {
      opacity: 0.3
    },
    itemStyle: {
      color: '#409EFF'
    }
  }]
})

const pieOption = ref({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '销售分布',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '线上销售' },
        { value: 735, name: '门店销售' },
        { value: 580, name: '代理商' },
        { value: 484, name: '其他' }
      ]
    }
  ]
})

const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    router.push('/login')
  })
}
</script>

<style scoped>
.dashboard {
  min-height: 100vh;
  background-color: #f0f2f5;
}

.el-header {
  background-color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.header-content {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.overview-cards {
  margin-bottom: 20px;
}

.card-content {
  text-align: center;
}

.card-title {
  font-size: 14px;
  color: #909399;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
}

.card-trend {
  font-size: 12px;
  &.up { color: #67C23A; }
  &.down { color: #F56C6C; }
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart {
  height: 350px;
}

.el-main {
  padding: 20px;
}
</style>